<template>
	<view
		class="ui-input"
		:class="[
			{
				'ui-input--prefix': $slots.prepend || prefixIcon,
				'ui-input--suffix': $slots.append || suffixIcon || clearable,
				'ui-input--focus': isFocus,
				'is-disabled': disabled
			}
		]"
	>
		<view class="ui-input__prefix" v-if="$slots.prepend || prefixIcon">
			<view class="ui-input__prepend" v-if="$slots.prepend">
				<slot name="prepend"></slot>
			</view>
			<text class="ui-input__icon" :class="[prefixIcon]" v-if="prefixIcon"></text>
		</view>
		<input
			v-model="value2"
			class="ui-input__inner"
			:type="type"
			:placeholder="placeholder"
			:disabled="disabled"
			:focus="focus"
			:placeholder-style="placeholderStyle"
			:placeholder-class="placeholderClass"
			:maxlength="maxlength"
			:cursor-spacing="cursorSpacing"
			:confirm-type="confirmType"
			:confirm-hold="confirmHold"
			:adjust-position="adjustPosition"
			:holdKeyboard="holdKeyboard"
			@input="onInput"
			@focus="onFocus"
			@blur="onBlur"
			@confirm="onConfirm"
			@keyboardheightchange="onKeyboardheightchange"
		/>
		<view class="ui-input__suffix" v-if="$slots.append || suffixIcon || clearable">
			<view class="ui-input__append" v-if="$slots.append">
				<slot name="append"></slot>
			</view>

			<text class="ui-input__icon" :class="[suffixIcon]" v-if="suffixIcon"></text>
			<text
				class="ui-input__clear iconfont icon-guanbi"
				@tap="clear"
				v-if="clearable && value2 && isFocus"
			></text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value: [String, Number],
		type: {
			type: String,
			default: 'text'
		},
		password: Boolean,
		placeholder: String,
		clearable: Boolean,
		placeholderStyle: String,
		placeholderClass: String,
		disabled: Boolean,
		focus: Boolean,
		maxlength: {
			type: Number,
			default: 140
		},
		cursorSpacing: {
			type: Number,
			default: 0
		},
		confirmType: {
			type: String,
			default: 'done'
		},
		confirmHold: Boolean,
		adjustPosition: {
			type: Boolean,
			default: true
		},
		holdKeyboard: {
			type: Boolean,
			default: false
		},
		prefixIcon: String,
		suffixIcon: String
	},

	data() {
		return {
			value2: null,
			isFocus: false
		};
	},

	watch: {
		value: {
			immediate: true,
			handler(val) {
				this.value2 = val;
			}
		},

		focus: {
			immediate: true,
			handler(val) {
				this.isFocus = val;
			}
		}
	},

	methods: {
		onInput(e) {
			this.change();
		},

		onFocus(e) {
			this.$emit('focus', e);
			this.isFocus = true;
		},

		onBlur(e) {
			this.$emit('blur', e);
		},

		onConfirm(e) {
			this.$emit('confirm', e);
			this.search();
		},

		onKeyboardheightchange(e) {
			this.$emit('keyboardheightchange', e);
		},

		search() {
			this.$emit('search', this.value2);
		},

		clear() {
			this.value2 = '';
			this.change();
		},

		change() {
			this.$emit('input', this.value2);
			this.$emit('change', this.value2);
		}
	}
};
</script>

<style lang="scss" scoped>
.ui-input {
	display: flex;
	align-items: center;
	height: 70rpx;
	width: 100%;
	line-height: 70rpx;
	background-color: #fff;
	position: relative;
	border: 1rpx solid #dcdfe6;
	border-radius: 8rpx;
	box-sizing: border-box;
	transition: border-color 0.2s;
	padding: 0 20rpx;

	&--focus {
		border-color: $main-color;
	}

	&.is-disabled {
		background-color: #f5f7fa;

		.cl-input__inner {
			background-color: #f5f7fa;
		}
	}

	&__inner {
		font-size: 26rpx;
		height: 66rpx;
		box-sizing: border-box;
		background-color: #fff;
		flex: 1;
		border-radius: inherit;
		outline: none;
		border: 0;
		padding: 0;
	}

	&__prefix,
	&__suffix {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 66rpx;
		text-align: center;
		font-size: 26rpx;
		flex-shrink: 0;
	}

	&__prepend {
		margin-right: 20rpx;
	}

	&__append {
		margin-left: 20rpx;
	}

	&__prepend,
	&__append {
		display: flex;
		align-items: center;
	}

	&__clear,
	&__icon {
		display: inline-block;
		font-size: 34rpx;
		color: #999;
	}

	&__clear {
		color: #c1c1c1;
	}

	&__prefix {
		.cl-input__icon {
			margin-right: 20rpx;
		}
	}

	&__suffix {
		.cl-input__icon {
			margin-left: 20rpx;
		}
	}
}
</style>